/*
 * @Description:
 * @Version: 2.0
 * @Author: Xing
 * @Date: 2020-08-14 15:59:38
 * @LastEditors: Xing
 * @LastEditTime: 2020-08-17 14:39:41
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Tag, Space, message, Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import './monday.css';
import { getAppointWorkers } from '../../request/appoint';
const { confirm } = Modal;

export class monday extends Component {
  static propTypes = {};

  state = {
    page: 1,
    size: 10,
    tableData: [], //表格数据
    columns: [
      {
        title: '头像',
        dataIndex: 'worker_avatar',
        key: 'worker_avatar',
        render: (text) => <img className="avatar" src={text}></img>,
      },
      {
        title: '姓名',
        dataIndex: 'worker_name',
        key: 'worker_name',
        render: (text) => <a>{text}</a>,
      },
      {
        title: '联系方式',
        dataIndex: 'worker_mobile',
        key: 'worker_mobile',
      },
      {
        title: '性别',
        dataIndex: 'worker_sex',
        key: 'worker_sex',
        render: (text) => <a>{text === 1 ? '男' : '女'}</a>,
      },
      {
        title: '备注',
        dataIndex: 'worker_remark',
        key: 'worker_remark',
        render: (text) => <a>{text}</a>,
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text) => <a>{text === 1 ? '可预约' : '不可预约'}</a>,
      },
      {
        title: '创建时间',
        key: 'create_time',
        dataIndex: 'create_time',
        render: (text) => <a>{text}</a>,
      },
      {
        title: '操作',
        key: 'action',
        render: (row) => (
          <Space size="middle">
            <a onClick={this.handleEdit.bind(this, row)}>删除</a>
          </Space>
        ),
      },
    ], //表头
  };

  componentDidMount = () => {
    this.getAppointWorkerList();
  };

  //   点击操作
  handleEdit(row) {
    // console.log('点击操作', row);
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  //   获取服务员列表
  getAppointWorkerList = () => {
    let params = {
      page: this.state.page,
      size: this.state.size,
    };
    getAppointWorkers(params, params).then(
      (res) => {
        if (res.ret === 0) {
          res.data.list &&
            res.data.list.forEach((element) => {
              element.key = element.worker_id;
            });
          this.setState({
            tableData: res.data.list,
            page: res.data.page,
            size: res.data.size,
          });
        } else {
          message.error(res.msg || '获取数据失败');
        }
      },
      (error) => {
        message.error('网络错误');
      }
    );
  };

  render() {
    return (
      <div>
        <Table columns={this.state.columns} dataSource={this.state.tableData} />
      </div>
    );
  }
}

export default monday;
